/*
 * @Author: 脉迈
 * @Date: 2022-01-25 15:37:04
 * @LastEditors: 脉迈
 * @LastEditTime: 2022-01-27 11:59:34
 */
import React from "react";
import styles from "./List.module.scss";
import { Button, Tooltip } from "antd";
import { getTemeplateDetail } from "../../../../api/template";
import { EyeOutlined, EditOutlined } from "@ant-design/icons";
import { useRecoilState } from "recoil";
import {
  pageComponentsState,
  blockActiveIndexState,
} from "store/modules/element";
const List = (props: any) => {
  const [pageComponentList, setPageComponentList] =
    useRecoilState(pageComponentsState);
  const [blockActiveIndex] = useRecoilState(blockActiveIndexState);
  const handleEditTemplate = (data: any) => {
    console.log(props.type);
    if (props.type === "block") {
      let newPageComponentList: any = JSON.parse(
        JSON.stringify(pageComponentList)
      );
      newPageComponentList.push(JSON.parse(data)[0]);
      setPageComponentList(newPageComponentList);
    } else if (props.type === "template") {
      setPageComponentList(JSON.parse(data));
    }
  };
  return (
    <div className={styles.list}>
      {props.data.map((item: any, index: number) => {
        return (
          <div className={styles.aitem}>
            <Button type="link">{item.name}</Button>
            <div className={styles.action}>
              {/* <Tooltip placement="top" title="预览">
              <EyeOutlined />
            </Tooltip> */}
              <Tooltip placement="top" title="编辑">
                <EditOutlined
                  onClick={() => {
                    handleEditTemplate(item.data);
                  }}
                />
              </Tooltip>
            </div>
          </div>
        );
        // <div className={styles.item}>

        // <div className={styles.action}>
        //     <div className={styles.btn}>
        //       <Button
        //         type="primary"
        //         disabled
        //         shape="round"
        //         icon={<EyeOutlined />}
        //         size="small"
        //         className={styles.btn_item}
        //       >
        //         预览页面
        //       </Button>
        //       <Button
        //         shape="round"
        //         icon={<EditOutlined />}
        //         size="small"
        //         className={styles.btn_item}
        //         onClick={()=>{handleEditItem(item.id)}}
        //       >
        //         编辑
        //       </Button>
        //     </div>
        //  </div>
        //  </div>
      })}
    </div>
  );
};

export default List;
